<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程管理</title>
    <!-- model_editing_visualizable.html - "../apps/com.awspaas.user.apps.model/model_js/visualizable" -->
    <link rel="stylesheet" href="./js/lib/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="./css/jquery-ui-custom.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/lib/iconfont-1.0.4.js"></script>
    <script>
        var sid = '<#sessionId>';	 		 //session 
        var craftPathUUID = '<#CRAFTPATHUUID>';  		 //模型路线路线UUID
        var materialUUID = '<#MATERIALUUID>';  		 //模型UUID
        var bindID = '<#BINDID>';           //模型数据结构唯一标识
    </script>
</head>

<body>
    <div class="process-manager">
        <div class="processTitBox">
            <div class="titlePanel">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-process"></use>
                    </svg>
                </span>
                <div id="materialName"><!--模型名称--></div>
            </div>
            <div class="legendItem">
                <span><i style="background: #eebe77;"></i>策划中</span>
                <span><i style="background: #b1b3b8;"></i>未采集</span>
                <span><i style="background: #79bbff;"></i>采集中</span>
                <span><i style="background: #95d475;"></i>已完成</span>
                <span><i style="background: #f89898;"></i>异常</span>
            </div>

            <div class="header-right">
                <div class="icon-buttons">
                    <button class="icon-btn" id="saveProcess" title="提交">
                        <span>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-submit"></use>
                            </svg>
                        </span>
                    </button>
                    <button class="icon-btn" id="savePublish" title="发布">
                        <span>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-publish"></use>
                            </svg>
                        </span>
                    </button>
                    <button class="icon-btn" id="addParent" title="添加子阶段">
                        <span style="font-size: 26px;">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-add-fill"></use>
                            </svg>
                        </span>
                    </button>
                    <button class="icon-btn" id="patch" title="差异比对">
                        <span>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-patch"></use>
                            </svg>
                        </span>
                    </button>
                </div>
                <div style="display: inline-block; margin-left: 10px;">
                    <div class="cw-switch cw-switch-checked">
                        <div class="cw-switch-inner">
                            <span id="word"></span>
                        </div>
                    </div>
                    <span style=" display: inline-block;vertical-align: middle;">显示全部</span>
                </div>
            </div>

        </div>
        <div class="processTreeBox" style="position: relative;">
            <div class="processHeaderFixed"></div><!--滚动时父节点下面固定辅助区域-->
            <div id="processTree">
                <!-- 节点将在这里动态生成 -->
            </div>
        </div>
    </div>
    <!-- 编辑父节点弹窗 -->
    <!-- <div class="modal-overlay" id="editParentModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑子阶段</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group g_flex">
                    <label for="parentTitle">子阶段名称</label>
                    <input type="text" id="parentTitle" class="modal-input">
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-cancel-btn">取消</button>
                <button class="modal-btn modal-confirm-btn">确定</button>
            </div>
        </div>
    </div> -->
    <!-- 编辑子节点弹窗 -->
    <div class="modal-overlay" id="editChildModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑质量活动</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group g_flex">
                    <label for="childTitle">活动名称</label>
                    <input type="text" id="childTitle" class="modal-input">
                </div>
                <!-- <div class="form-group">
                    <label for="childType">活动类型</label>
                    <input type="text" id="childTitle" class="modal-input">
                </div> -->
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-cancel-btn">取消</button>
                <button class="modal-btn modal-confirm-btn">确定</button>
            </div>
        </div>
    </div>
    <!-- 删除父节点确认弹窗 -->
    <!-- <div class="modal-overlay" id="deleteParentModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认删除</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body" style="padding: 0 26px;">
                <p>确定删除此子阶段及其所有质量活动吗？</p>
                <p style="color: #f56c6c; font-size: 13px;">注意：此操作不可恢复！</p>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-cancel-btn">取消</button>
                <button class="modal-btn modal-confirm-btn">确定</button>
            </div>
        </div>
    </div> -->
    <!-- 删除子节点确认弹窗 -->
    <!-- <div class="modal-overlay" id="deleteChildModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认删除</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body" style="padding: 0 26px;">
                <p>确定删除此质量活动吗？</p>
                <p style="color: #f56c6c; font-size: 13px;">注意：此操作不可恢复！</p>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-cancel-btn">取消</button>
                <button class="modal-btn modal-confirm-btn">确定</button>
            </div>
        </div>
    </div> -->
    <!-- 添加父节点弹窗 -->
    <!-- <div class="modal-overlay" id="addParentModal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加子阶段</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group g_flex">
                    <label for="newParentTitle">子阶段名称</label>
                    <input type="text" id="newParentTitle" class="modal-input" placeholder="请输入子阶段名称">
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-cancel-btn">取消</button>
                <button class="modal-btn modal-confirm-btn">确定</button>
            </div>
        </div>
    </div> -->

    <!-- 添加节点弹窗 -->
    <div id="dialogAddNode" title="添加">
        <div id="addNodeTabs">
            <ul>
                <li><a href="#tabs-project">模型库</a></li>
                <li><a href="#tabs-custom">自定义</a></li>
            </ul>
            <div id="tabs-project">
                <div class="form-group">
                    <label for="projectSelect"><!--子阶段工作项目--></label>
                    <div class="input-box">
                        <select name="projectSelect" id="projectSelect" class="form-control">
                            <option value="">请选择工作项目</option>
                        </select>
                        <label id="projectSelect-error" class="error" style="display: none;">请选择工作项目</label>
                    </div>
                </div>
            </div>
            <div id="tabs-custom">
                <div class="form-group">
                    <label for="newNodeName"><!--子阶段名称--></label>
                    <div class="input-box">
                        <input type="text" id="newNodeName" class="form-control" placeholder="请输入名称">
                        <label id="newNodeName-error" class="error" style="display: none;">请输入名称</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 编辑节点弹窗 -->
    <div id="dialogEditNode" title="编辑">
        <div class="form-group">
            <label for="editNodeName"><!--子阶段名称--></label>
            <div class="input-box">
                <input type="text" id="editNodeName" class="form-control" placeholder="请输入名称">
                <label id="editNodeName-error" class="error" style="display: none;">请输入名称</label>
            </div>
        </div>
    </div>
    <!-- 删除节点弹窗 -->
    <div id="dialogDeleteNode" title="确认删除">
        <div class="modal-body" style="padding: 0 26px;">
            <p class="deleteLabel"><!--确定删除此质量活动吗？--></p>
            <p style="color: #f56c6c; font-size: 13px;">注意：此操作不可恢复！</p>
        </div>
    </div>
    <!-- 子节点悬浮框 -->
    <div class="child-tooltip" id="childTooltip">
        <div class="child-tooltip-title"></div>
        <div class="child-tooltip-content"></div>
    </div>

    <!-- 自定义右侧抽屉弹窗 -->
    <div id="drawer-overlay" class="drawer-overlay"></div>
    <div id="drawer-dialog">
        <div class="drawer-header">
            <span id="title"><!--查看详情--></span>
            <span class="drawer-close">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-close"></use>
                </svg>
            </span>
        </div>
        <div class="drawer-content">
            <iframe class="drawer-iframe" src="" frameborder="0"></iframe>
        </div>
    </div>

    <script src="./js/lib/jquery-3.6.0.min.js"></script>
    <script src="./js/lib/jquery-ui/jquery-ui.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/mainUtil.js"></script>
    <script src="./js/messageUtil.js"></script>
</body>

</html>